<template>
	<view class="edit-user">
		<view class="option" style="padding: 20rpx 24rpx 20rpx 24rpx;" @tap="setImg">
			<view class="option-txt">头像</view>

			<!-- <view class="option-img red"></view> -->
			<image :src="userInfo.headportrait" class="option-img"></image>
		</view>

		<view class="option" @click="editName()">
			<view class="option-txt">昵称</view>
			<view class="option-content">{{userInfo.name}}</view>
			<!-- <u-icon name="arrow-right" size='18' color="#A3A3A3"></u-icon> -->
		</view>

		<view class="option" style="height: 110rpx;" v-if="false">
			<view class="option-txt">手机号</view>
			<button class="option-content">{{userInfo.mobile||'请授权获取手机号'}}</button>
			<!-- <u-icon name="arrow-right" size='18' color="#A3A3A3"></u-icon> -->
		</view>

		<view class="save-btn" @tap="postEditUser">
			保存
		</view>

	</view>
</template>

<script>
	import izUploader from '@/helpYouShop/utils/iz-aloss-uploader/iz-aloss-uploader.js';
	export default {
		data() {
			return {
				userInfo: {}
			}
		},

		onLoad() {
			this.init()
		},
		onShow() {

		},

		mounted() {

		},
		methods: {
			init() {
				this.userInfo = this.$tools.getUserInfo()
			},
			editName(nickname) {
				let path = '/pages/tabbar/user/setting/editName'
				uni.navigateTo({
					url: path
				})
			},
			setImg() {
				let self = this;
				uni.chooseImage({
					success: function(res) {
			 		let uploadTask = izUploader(
							res.tempFilePaths[0],
							'png',
							data => {
								console.log('data', data)
								let img = 'http://oss.youkutongcheng.com' + data
								self.userInfo=img
							},
							err => {
								console.log(err);
							}
						);
						uploadTask.onProgressUpdate(async function(r) {
							console.log(r);
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.edit-user {
		position: relative;

		.authentication {
			display: flex;
			flex-direction: column;
		}

		.option {
			margin-bottom: 10rpx;
			padding: 0 24rpx;
			display: flex;
			background: #fff;
			align-items: center;

			.hint {
				height: 60rpx;
				text-align: center;
				color: #F95F37;
				font-size: 26rpx;
				// padding-bottom: 20rpx;
			}

			.option-txt {
				flex: auto;
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.9);
				// font-weight: bold;

			}


			.option-img {
				margin-right: 14rpx;
				border-radius: 50%;
				height: 68rpx;
				width: 68rpx;

				flex: none;
			}

			.option-content {
				height: 68rpx;
				// border: 1rpx solid red;
				padding: 20rpx 0;
				margin-right: 14rpx;
				flex: none;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.6);
			}

			.option-authentication {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.option-content-red {
				color: #F95F37;
			}

			.option-input {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				// border: 1rpx solid red;
				width: 100%;

				.input-name {
					display: flex;
					align-items: center;
					width: 140rpx;
					flex: none;

					.importance {
						color: #F01D1D;
					}

					.txt {
						font-size: 32rpx;
						color: rgba(0, 0, 0, 0.9);
					}
				}

				.input-view {
					border-radius: 24rpx;
					background: #F5F5F5;
					height: 88rpx;
					flex: auto;
					display: flex;

					.input-class {
						height: 100%;
						// padding-left: 400rpx;
						margin-right: 40rpx;
						font-size: 26rpx;
						margin-left: auto;
						text-align: right;
					}

					.placlass {
						color: rgba(0, 0, 0, 0.6);
					}

					.padding-right {
						// padding-left: 375rpx;

					}
				}
			}
		}

		.save-btn {
			position: fixed;
			bottom: 60rpx;
			left: 48rpx;
			right: 48rpx;
			line-height: 96rpx;
			text-align: center;

			font-size: 32rpx;
			background: linear-gradient(128.5deg, #FAE568FF 0%, #FFC82FFF 100%), #CCCCCCFF;
			border-radius: 96rpx;

		}
	}
</style>
